<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分布式Crontab</title>

    <!-- jquery -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <!-- bootstrap -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

    <!-- vue -->
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 生产环境版本，优化了尺寸和速度 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>-->

    <!-- vue http请求 -->
    <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.3"></script>

    <!-- element-ui 样式 -->
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div class="container-fluid" id="app">

        <!--页头-->
        <div class="row">
            <div class="col-md-12">
                <div class="page-header">
                    <h1>管理后台<small>分布式Crontab</small></h1>
                </div>
            </div>
        </div>
        <!--功能按钮-->
        <div class="row">
            <div class="col-md-12">
                <el-row>
                    <el-button type="primary" @click="dialogFormVisible = true">新建任务</el-button>
                    <el-button type="primary" @click="showWorkerList">健康节点</el-button>
                </el-row>
            </div>

        </div>
        <!-- 表单 -->
        <div>
            <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="任务名称" :label-width="formLabelWidth">
                        <el-input v-model="form.jobName" autocomplete="off"></el-input>
                    </el-form-item>
                    <div>
                        <div style="margin-left: 120px;color: red">
                            二进制文件脚本,需在命令前加"cm:"区分,如:"cm:/app/checkin"
                        </div>
                    </div>
                    <el-form-item label="shell命令" :label-width="formLabelWidth">
                        <el-input v-model="form.command" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="cron表达式" :label-width="formLabelWidth">
                        <el-input v-model="form.exp" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="jobSave">确 定</el-button>
                </div>
            </el-dialog>
        </div>
        <div>
            <el-dialog
                    title="日志列表"
                    :visible.sync="dialogLogVisible"
                    width="80%">
<!--                <span>这是一段信息</span>-->

                <template>
                    <el-table
                            :data="logListData"
                            style="width: 100%">
                        <el-table-column
                                prop="command"
                                label="shell命令"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="err"
                                label="错误原因"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="output"
                                label="脚本输出"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="planTime"
                                label="计划开始时间">
                        </el-table-column>
                        <el-table-column
                                prop="schedulerTime"
                                label="实际调度时间">
                        </el-table-column>
                        <el-table-column
                                prop="startTime"
                                label="开始执行时间">
                        </el-table-column>
                        <el-table-column
                                prop="endTime"
                                label="执行结束时间">
                        </el-table-column>
                    </el-table>
                </template>

                <span slot="footer" class="dialog-footer"></span>
            </el-dialog>

        </div>
        <div>
            <el-dialog
                    title="健康节点列表"
                    :visible.sync="dialogIpListVisible"
                    width="30%">
                <!--                <span>这是一段信息</span>-->

                <template>
                    <el-table
                            :data="workerListData"
                            style="width: 100%">
                        <el-table-column
                                prop="ip"
                                label="节点IP"
                                width="180">
                        </el-table-column>
                    </el-table>
                </template>

                <span slot="footer" class="dialog-footer"></span>
            </el-dialog>

        </div>
        <!--任务列表-->
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default" style="margin-top: 20px">
                    <div class="panel-body">
                      <table class="table table-striped">
                          <thead>
                            <tr>
                                <th>任务名称</th>
                                <th>shell命令</th>
                                <th>cron表达式</th>
                                <th>任务操作</th>
                            </tr>
                          </thead>
                          <tbody>

                          <tr v-for="item in cronList">
                              <td class="job-name">{{item.jobName}}</td>
                              <td class="job-command">{{item.command}}</td>
                              <td class="job-cronExp">{{item.exp}}</td>
                              <td>
                                  <!--按钮组 -->
                                  <div class="btn-toolbar">
                                      <button type="button" class="btn btn-info" @click="editDig(item)">编辑</button>
                                      <button type="button" class="btn btn-danger" @click="delJob(item)">删除</button>
                                      <button type="button" class="btn btn-warning"  @click="killJob(item)">强杀</button>
                                      <button type="button" class="btn btn-info"  @click="logList(item)">日志</button>
                                  </div>
                              </td>
                          </tr>

                          </tbody>
                      </table>



                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.3/moment.min.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            title: 'Hello Vue2222!',
            // jobName,command,exp
            cronList:[
                // {
                //     jobName: "jobbbbb",
                //     command: "dddd",
                //     exp: "ttttt"
                // }
            ],
            // 表单
            dialogFormVisible: false,
            // 日志框
            dialogLogVisible:false,
            // 日志列表
            logListData:[
            ],
            // IP列表弹框
            dialogIpListVisible:false,
            // worker节点列表
            workerListData:[
            ],
            form: {
                jobName: '',
                command: '',
                exp: '',
            },
            formLabelWidth: '120px'
        },
        methods: {
            delJob(jobOjb){
                this.$http.post("/job/delete",{
                    name:jobOjb.jobName
                },{
                    emulateJSON:true
                }).then(response => {
                    if (response.body.code ==0) {
                        this.$message.success("删除成功")
                        this.jobList()
                    } else {
                        this.$message.error(response.body.msg)
                    }
                },response=>{
                    this.$message.error("删除失败")
                })
            },
            showWorkerList(){
                this.dialogIpListVisible = true
                this.$http.post("/worker/list",{
                },{
                    emulateJSON:true
                }).then(response => {
                    if (response.body.code ==0) {
                        this.$message.success("获取健康节点列表成功")
                        this.workerListData = response.body.data
                    } else {
                        this.$message.error(response.body.msg)
                    }
                },response=>{
                    this.$message.error("获取健康节点列表失败")
                })
            },
            logList(jobOjb){
                // 弹出日志框
                this.dialogLogVisible = true
                this.logListData = []
                this.$http.post("/job/log",{
                    name:jobOjb.jobName
                },{
                    emulateJSON:true
                }).then(response => {
                    if (response.body.code ==0) {
                        this.$message.success("获取列表成功")
                        respData = response.body.data
                        // 处理时间
                        for (let key in respData) {
                            respData[key]['startTime'] = moment(respData[key]['startTime']).format("YYYY-MM-DD HH:mm:ss.SSS")
                            respData[key]['endTime'] = moment(respData[key]['endTime']).format("YYYY-MM-DD HH:mm:ss.SSS")
                            respData[key]['planTime'] = moment(respData[key]['planTime']).format("YYYY-MM-DD HH:mm:ss.SSS")
                            respData[key]['schedulerTime'] = moment(respData[key]['schedulerTime']).format("YYYY-MM-DD HH:mm:ss.SSS")
                        }

                        this.logListData = response.body.data
                    } else {
                        this.$message.error(response.body.msg)
                    }
                },response=>{
                    this.$message.error("获取列表失败")
                })
            },
            killJob(jobOjb){
                this.$http.post("/job/kill",{
                    name:jobOjb.jobName
                },{
                    emulateJSON:true
                }).then(response => {
                    if (response.body.code ==0) {
                        this.$message.success("强杀成功")
                        this.jobList()
                    } else {
                        this.$message.error(response.body.msg)
                    }
                },response=>{
                    this.$message.error("强杀失败")
                })
            },
             editDig(jobObj){
                 this.form.jobName = jobObj.jobName
                 this.form.command = jobObj.command
                 this.form.exp = jobObj.exp
                 this.dialogFormVisible = true
            },
            jobSave(){
                // 提交信息
                this.$http.post("/job/save",{
                    job:JSON.stringify({
                        jobName : this.form.jobName,
                        command : this.form.command,
                        exp : this.form.exp,
                    })
                },{
                    emulateJSON:true
                }).then(response => {
                    // 成功
                    if (response.body.code == 0) {
                        // 成功
                        this.$message.success("保存成功")
                        this.jobList()
                        // 关闭弹框
                        this.dialogFormVisible = false

                    } else {
                        // 失败
                        this.$message.error(response.body.msg)
                    }
                },response => {
                    // 失败
                    this.$message.error("保存失败")
                })

            },
            jobList(){
                // 请求列表接口
                this.$http.get("/job/list").then(response => {
                    if (response.body.code == 0) {
                        this.cronList = response.body.data
                    } else {
                        this.$message.error(response.body.msg);
                    }
                },response => {
                    // 请求错误
                    this.$message.error("请求错误,请稍后再试");
                })

            }
        },
         created:  function (event) {
            this.jobList()
        }
    })
</script>
</html>